import {
  Button,
  Col,
  Image,
  Row,
  Table,
  Tag,
  Tooltip,
  Modal,
  Form,
  Input,
  Select,
  Switch,
} from "antd";
import React, { FC, useEffect, useState } from "react";
import MyTitle from "../../components/Title";
import { inject } from "mobx-react";

import { roleList } from "../../utils";
import moment from "moment";
import { baseURL } from "../../api/request";
import { FormOutlined } from "@ant-design/icons";
import { reg } from "../../utils/validate";
import { ajax } from "./../../api/index";
import { observer } from "mobx-react";

const { Option } = Select;
const RoleList: FC<any> = ({ uinfo, data }) => {
  const [form] = Form.useForm();
  const { userList, getUserListAsync, getXuekeList } = data;
  const { userInfo } = uinfo;
  // console.log(userInfo)
  // const { userList } = state.user;
  useEffect(() => {
    getUserListAsync();
  }, []);
  const updaterole = (item: any) => {
    form.setFieldsValue({
      username: item.username,
      role: item.role,
      _id: item._id,
    });
    setOpen(true);
  };
  const [open, setOpen] = useState<any>(false);
  const [disOpen, setDisOpen] = useState<any>(false);
  const onOk = async (item: any) => {
    var role = form.getFieldValue("role");
    var _id = form.getFieldValue("_id");
    console.log(role, _id, item);

    let { code, result } = await ajax.roleupdate({
      role,
      _id,
    });
    if (code == 200) {
      // var list = userList.filter((v: any) => v.role != role)
      getUserListAsync();
      setOpen(false);
    }
  };
  const onCancel = () => {
    setOpen(false);
  };
  //禁用
  const checkone = async (item: any) => {
    let { code, result } = await ajax.roleupdate({
      _id: item._id,
      disabled: !item.disabled,
    });
    if (code == 200) {
      getUserListAsync();
    }
  };
  const columns: any = [
    {
      title: "序号",
      align: "center",
      render: (value: any, item: any, index: any) => {
        return index + 1;
      },
    },
    {
      title: "用户名",
      align: "center",
      dataIndex: "username",
    },
    {
      title: "注册时间",
      align: "center",
      dataIndex: "time",
      render: (value: any, item: any, index: any) => {
        return <p>{moment(value).format("YYYY-MM-DD HH:mm")}</p>;
      },
    },
    {
      title: "用户头像",
      dataIndex: "avatar",
      align: "center",
      render: (value: any, item: any, index: any) => {
        return (
          <Image
            style={{ borderRadius: "50%", width: 30, height: 30 }}
            src={
              item.avatar
                ? item.avatar.replace(/public/, baseURL)
                : require("../../assets/images/123.jpg")
            }
            alt=""
          />
        );
      },
    },
    {
      title: "角色",
      dataIndex: "role",
      render: (value: any, item: any, index: any) => {
        return (
          <Tag color={roleList.find((v: any) => v.value == item.role)?.color}>
            {roleList.find((v: any) => v.value == item.role)?.label}
          </Tag>
        );
      },
    },
    {
      title: "修改权限",
      render: (value: any, item: any, index: any) => {
        return (
          <div>
            {userInfo.role > item.role && (
              <Tooltip title="修改权限">
                <Button
                  type="primary"
                  shape="circle"
                  icon={<FormOutlined />}
                  onClick={() => updaterole(item)}
                ></Button>
              </Tooltip>
            )}
          </div>
        );
      },
    },
    {
      title: "禁用账号",
      render: (value: any, item: any, index: any) => {
        return (
          <Tooltip title="禁用账号">
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              defaultChecked={item.disabled}
              onClick={() => checkone(item)}
            />
          </Tooltip>
        );
      },
    },
  ];
  return (
    <div>
      <MyTitle text="权限管理" />
      <Row>
        <Col span={22} offset={1}>
          <Table
            columns={columns}
            dataSource={userList}
            size="middle"
            rowKey={(item: any) => item._id}
          />
        </Col>
      </Row>
      <Modal
        title="修改权限"
        visible={open}
        onOk={onOk}
        onCancel={onCancel}
        okText="确定"
        cancelText="取消"
      >
        <Form
          form={form}
          name="control-hooks"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 12 }}
          style={{ marginLeft: 50 }}
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: "请输入用户名" },
              {
                pattern: reg.username,
                message: "请输入3-12位字母数字中文结合的用户名",
              },
            ]}
          >
            <Input placeholder="请输入用户名" disabled />
          </Form.Item>
          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: "请选择" }]}
          >
            <Select style={{ width: 220 }} placeholder="请选择">
              {userInfo &&
                roleList.map((item) => (
                  <Option
                    value={item.value}
                    key={item.id}
                    disabled={userInfo.role < item.value}
                  >
                    {item.label}
                  </Option>
                ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default inject("data", "uinfo")(observer(RoleList));
